<template>
	<view class="certmain">
		<uni-nav-bar shadow title="预定茶会" @clickLeft="$wanlshop.back(1)" height="88rpx" :border="false" :fixed="true" backgroundColor="#FFFFFF"
			:shadow="false" left-icon="left"></uni-nav-bar>

		<view class="container">
			<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item name="name" required label="茶会名称">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入茶会名称">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="zhuban" required label="主办单位">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.zhuban" placeholder="请输入主办单位">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="chengjie" required label="承办单位">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.chengjie" placeholder="请输入承办单位">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="address" required label="地点">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.address" placeholder="请输入地点">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="canyu" required label="参与人员">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.canyu" placeholder="请输入参与人员">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tea_cate_id" required label="茶会类型">
					<uni-data-picker placeholder="请选择茶会类型" popup-title="请选择茶会类型" :localdata="dataTree"
						v-model="formData.tea_cate_id" @change="onchange" @nodeclick="onnodeclick"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item name="tea_cehua" required label="茶会策划">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.tea_cehua" placeholder="请输入茶会策划">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tea_yishi" required label="茶艺师">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.tea_yishi" placeholder="请输入茶艺师">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="price" required label="报价价格">
					<uni-easyinput type="number" :inputBorder="true" v-model="formData.price" placeholder="请输入报价价格">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="img" required label="封面图">
					<uni-file-picker v-model="formData.image" file-mediatype="image" mode="grid" file-extname="png,jpg"
						disable-preview :del-icon="false" return-type="object" :image-styles="imageStyles" :limit="1"
						@progress="progress" @success="success" @fail="fail" @select="select" />
				</uni-forms-item>
				<uni-forms-item name="content" required label="内容">
					<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入正文" />
				</uni-forms-item>



				<view>
					<button @click="submitForm('form')">提交</button>

					<!-- <button @click="resetForm">重置表单</button> -->
				</view>
			</uni-forms>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				imageStyles: {},
				idcard: '',
				AllList: [],
				dataTree: [{
						text: "亲子茶会",
						value: "1",
					},
					{
						text: "青年茶会",
						value: "2",
					},
					{
						text: "成人茶会",
						value: "3",
					},
					{
						text: "老人茶会",
						value: "4",
					}
				],
				formData: {
					name: '',
					zhuban: "",
					chengjie: "",
					address: "",
					canyu: "",
					tea_cate_id: '',
					tea_cehua: '',
					tea_yishi: '',
					price: '',
					image: {},
					content: "",

				},
				image: "",
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					},
					zhuban: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					chengjie: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					canyu: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					tea_cate_id: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					tea_cehua: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					tea_yishi: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					price: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					},
					// image: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入用户名'
					// 		},

					// 	]
					// },
					content: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},

						]
					}




				}


			}
		},
		onReady() {

		},
		methods: {
			change(name, value) {
				this.formData.checked = value
				this.$refs.form.setValue(name, value)
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			select(e) {
				console.log('选择文件：', e)
				let vm = this
				// vm.formData.image = e
				uni.uploadFile({
					url: 'https://yxcx.bigchun.com/api/common/upload',
					filePath: e.tempFilePaths[0],
					name: 'file', //后台接收字段名
					success: (res) => {
						console.log(JSON.parse(res.data))
						let result = JSON.parse(res.data)
						if (result.code == 1) {
							// vm.formData.image = e.tempFilePaths
							vm.image = result.data.url
						}
					},
					fail: (err) => {}
				})

			},
			submitForm(form) {
				let vm = this
				vm.$refs[form]
					.submit()
					.then(res => {
						vm.formData.image = vm.image
						vm.$api.post({
							url: '/tea/submit',
							data: vm.formData,
							success: (res) => {
								console.log(res)

								uni.showToast({
									title: '提交成功！'
								})
								setTimeout(() => {
									vm.$wanlshop.back(1)
								}, 1500)
								// this.BannerList = res.banner
							}
						})

					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			//重置表单 。原生的组件input组件不能重置表单
			resetForm() {
				this.$refs.form.resetFields()
			},
			validateField(form) {
				this.$refs[form]
					.validateField(['name', 'email'])
					.then(res => {

						console.log('表单的值：', res)
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			clearValidate(form, name) {
				if (!name) name = []
				this.$refs[form].clearValidate(name)
			}
		}
	}
</script>

<style lang="scss">
	.certmain {


		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

	}

	.cu-custom {
		line-height: 90rpx;
	}

	.container {
		padding: 30rpx;
	}

	/deep/ .uniui-clear {
		display: none;
	}
</style>
